<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      style="width: 500px; margin: 2px"
    >
      <el-form-item label="人员姓名" prop="personName">
        <el-input v-model="form.personName"></el-input>
      </el-form-item>
      <el-form-item label="人员性别" style="width: 40%">
        <el-radio-group v-model="form.sex">
          <el-radio :label="true">男</el-radio>
          <el-radio :label="false">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="证件类型" prop="idType">
        <el-select
          v-model="form.idType"
          placeholder="请选择证件类型"
          style="width: 419px"
        >
          <el-option label="身份证" value="1"></el-option>
          <el-option label="驾驶证" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idNum">
        <el-input v-model="form.idNum"></el-input>
      </el-form-item>
      <el-form-item label="所属企业" prop="firmId">
        <el-select
          v-model="form.firmId"
          placeholder="请选择所属企业"
          style="width: 419px"
        >
          <el-option label="广州分公司" value="1"></el-option>
          <el-option label="东莞分公司" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="departId">
        <el-select
          v-model="form.departId"
          placeholder="请选择所属部门"
          style="width: 419px"
        >
          <el-option label="产品部" value="1"></el-option>
          <el-option label="技术部" value="2"></el-option>
          <el-option label="工程部" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属角色" prop="roleId">
        <el-select
          v-model="form.roleId"
          placeholder="请选择所属角色"
          style="width: 419px"
        >
          <el-option label="超级管理员" value="1"></el-option>
          <el-option label="普通角色" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="账户排序" prop="sortId">
        <el-input v-model="form.sortId"></el-input>
      </el-form-item>
      <el-form-item label="账户密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">保存</el-button>
        <el-button @click="list">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addUserManage } from "@/api/sysManage/UserManage";
export default {
  data() {
    return {
      form: {
        personName: "",
        sex: true,
        idType: "",
        idNum: "",
        firmId: "",
        departId: "",
        roleId: "",
        phone: "",
        sortId: "",
        password: "",
      },
      rules: {
        personName: [
          { required: true, message: "请输入人员姓名", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择人员性别", trigger: "change" }],
        idType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        idNum: [{ required: true, message: "请输入证件号码", trigger: "blur" }],
        firmId: [
          { required: true, message: "请选择所属企业", trigger: "change" },
        ],
        departId: [
          { required: true, message: "请选择所属部门", trigger: "change" },
        ],
        roleId: [
          { required: true, message: "请选择所属角色", trigger: "change" },
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        sortId: [
          { required: true, message: "请输入账户排序", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入账户密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //添加
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          addUserManage(this.form).then((res) => {
            if (res.data) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.push("/sysManage/subscriber");
            } else {
              this.$message.error("添加失败");
              return;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳转
    list() {
      this.$router.push("/sysManage/subscriber");
    },
  },
  created() {},
};
</script>
<style>
</style>